<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <th:block th:include="common/head::noXadmin('YD ICONS')"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" th:href="@{/static/images/yd.png}">
    <style>
        html {
            background-color: #E3E3E3;
        }

        body {
            margin: 0 auto;
            position: relative;
            background-color: white;
        }

        .logo {
            font-size: 2em;
            height: 2em;
            line-height: 2em;
            font-weight: bolder;
            display: block;
        }

        .input-box {
            font-size: 1.5em;
        }

        .layui-icon-search {
            color: grey;
            position: absolute;
            left: 5px;
            font-size: 1em;
            line-height: 1.5em;
        }

        #search-box {
            padding-left: 1.5em;
            height: 1.5em;
            border-left: 0px;
            border-right: 0px;
            border-radius: 0px;
        }

        #icon-box {
            width: 90vw;
            margin: 0 auto;
        }

        #icon-box li {
            float: left;
            padding: 5px;
            margin: 6px;
            cursor: pointer;
            border: 1px solid #Fff;
        }

        #icon-box li:hover {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<div class="text-align-center">
    <div class="layui-row" style="height: 100px">
        <span class="logo">
           YD
        </span>
        <div class="input-box">
            <i class="layui-icon layui-icon-search"></i>
            <input id="search-box" class="layui-input"/>
        </div>
    </div>
    <div class="layui-row">
        <ul id="icon-box"></ul>
    </div>
    <div class="layui-row next" style="height: 55px;">
    </div>
</div>
<script>
    layui.use(['layer', 'flow', 'jquery'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let flow = layui.flow;
        const reqData = {pageNum: 1, pageSize: 50, pages: 1, name: ""};
        init();

        function init() {
            $('.next').html('');
            flow.load({
                elem: '.next' //指定列表容器
                , done: function (page, next) {
                    loadIcon(function (data) {
                        render(data);
                        next('', data.hasNextPage);
                    });
                }
            })
        }


        function render(data) {
            if (data.pageNum == 1) {
                console.log("reset");
                $("#icon-box").html('');
            }
            for (let icon of data.list) {
                let v = renderSvg(icon.value);
                let n = $(['<li id="icon-', icon.iconId, '">'
                    , renderSvg(icon.value)
                    , '</li>'].join(''));
                n.on('click', function (ele) {
                    layer.msg(icon.name);
                    sendMsg(v);
                });
                $("#icon-box").append(n);
            }
        }

        function loadIcon(callback) {
            $.ajax({
                url: rootPath + 'figma/icons',
                type: "GET",
                data: {pageNum: reqData.pageNum, pageSize: reqData.pageSize, name: reqData.name},
                dataType: "json",
                success: function (resp) {
                    reqData.pageNum += resp.data.hasNextPage ? 1 : 0;
                    callback && typeof callback == 'function' && callback(resp.data);
                },
                error: function (data) {
                    layer.msg(data.message);
                }
            });
        }

        $("#search-box").on('change', function (ele) {
            reqData.name = ele.target.value;
            reqData.pageNum = 1;
            init();
        });

    });
</script>
<script>
    function sendMsg(msg) {
        window.parent.postMessage(msg, "*");
    }

    let w = (document.body.offsetWidth * 0.9 / 5 - 24) / document.body.offsetWidth * 100 + "vw";

    function renderSvg(svgXml, opt = {width: w, height: w}) {
        let s = $(['<div>', svgXml, '</div>'].join(''));
        s.find('svg').attr({width: opt.width, height: opt.height});
        return s.html();
    }

</script>
</body>
</html>